<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修改DOM</title>
</head>
<body>
    <ul id="myul">
        <li>北京</li>
        <li>上海</li>
        <li>合肥</li>
        <li>芜湖</li>
    </ul>

    <button id="add">添加</button>
    <button id="del">删除</button>

    <script>
        let myul = document.getElementById("myul");
        let add = document.getElementById("add");
        let del = document.getElementById("del");

        /* 
           使用innerHTML属性也可以实现增删改，一般来说是增加
           但是这样增加会进行整体的替换
        
        */
       /*  add.onclick = function(){
            myul.innerHTML += "<li>广州</li>"
        } */

        add.onclick = function () {  

            /* 这种方式很麻烦，向html标签之间添加数据(文本节点)可以使用innerHTML */
            /* var li =document.createElement("li");
            var text =document.createTextNode("黄山市");
            li.appendChild(text); */


            var li =document.createElement("li");
            li.innerHTML = "黄山市";
            myul.appendChild(li);
        }



        /* 
           删除最后一个
        */
        del.onclick = function(){
            var len = myul.children.length;
            myul.removeChild(myul.children[len-1]);
        }

         


       

    </script>
</body>
</html>